<template>
  <div class="content">
    <div class="top">
      <div class="top_info">
        <div class="top_font">身份认证</div>
        <div class="under">应监管要求，请先进行身份认证</div>
      </div>
    </div>
    <div class="detail">
      <div class="rule">*请务必填写本人收款信息，信息错误会导致提现不到账</div>
      <div class="conten_form">
        <!-- 认证成功 -->
        <div class="auth_success flex-row" v-if="authType">
          <div class="auth_icon">
            <img src="../../assets/real/success.png" alt="" />
          </div>
          <div class="auth_font">已认证成功</div>
        </div>
        <!-- 审核中 -->
        <!-- <div
          class="auth_success flex-row"
          style="background: #fff4f4"
          v-if="authType == -1"
        >
          <div class="auth_icon">
            <img src="../../assets/real/error.png" alt="" />
          </div>
          <div class="auth_font" style="color: #fa5151">
            审核失败，手机号与实名信息不一致
          </div>
        </div> -->
        <!-- 审核失败 -->
        <!-- <div
          class="auth_success flex-row"
          style="background: rgba(255, 143, 31, 0.1)"
          v-if="authType == 1"
        >
          <div class="auth_icon">
            <img src="../../assets/real/audit.png" alt="" />
          </div>
          <div class="auth_font" style="color: #ff8f1f">审核中，请耐心等待</div>
        </div> -->
        <div class="form_item">
          <div class="form_title">
            <div class="lf_icon">
              <img src="../../assets/real/right_sj.png" alt="" />
            </div>
            <div class="font_title">姓名</div>
          </div>
          <div class="form_query">
            <van-field v-model="formParams.name" placeholder="请输入真实姓名" :readonly="authType ? true : false"
              />
          </div>
        </div>
        <div class="form_item">
          <div class="form_title">
            <div class="lf_icon">
              <img src="../../assets/real/right_sj.png" alt="" />
            </div>
            <div class="font_title">身份证号码</div>
          </div>
          <div class="form_query">
            <van-field v-model="formParams.idCard" placeholder="请输入正确的身份证号码" :readonly="authType ? true : false" />
          </div>
        </div>
        <div class="form_item">
          <div class="form_title">
            <div class="lf_icon">
              <img src="../../assets/real/right_sj.png" alt="" />
            </div>
            <div class="font_title">手机号码</div>
          </div>
          <div class="form_query">
            <van-field v-model="formParams.mobile" placeholder="请输入手机号码" :readonly="authType ? true : false" />
          </div>
        </div>
        <div class="form_item">
          <div class="form_title">
            <div class="lf_icon">
              <img src="../../assets/real/right_sj.png" alt="" />
            </div>
            <div class="font_title">支付宝账号</div>
          </div>
          <div class="form_query">
            <van-field v-model="formParams.cardNo" placeholder="请输入支付宝账号" :readonly="authType ? true : false" />
          </div>
        </div>
        <!-- 审核中 -- 审核成功 -->
        <!-- <auditCard v-if="authType == 1 || authType == 2" /> -->
        <!-- 认证 -- 审核失败 -->
        <!-- <authCard v-if="authType == -1 || authType == 0" ref="authRef" /> -->
      </div>
      <!-- <div class="agree flex-row" v-if="!authType">
        <div class="agree_icon">
          <van-checkbox icon-size="12" v-model="agree" />
        </div>
        <div class="agree_font">
          我已阅读并同意<span style="color: #fa5151">《隐私政策声明》《涉税代理委托书》《代开发温馨提示》</span>
        </div>
      </div> -->
      <div class="sub_btn" v-if="!authType" @click="handleOk()">确定</div>
      <div class="foot_btns flex-row" v-if="authType">
        <div class="btn_lf" @click="handleUnbinding()">解绑实名</div>
        <!-- <div class="btn_rg">更换信息</div> -->
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { showConfirmDialog, showToast } from "vant";
import { handleAuth, unbinding, getAuthInfo } from "@/api/auth";
// import auditCard from './components/audit.vue'
// import authCard from './components/authtion.vue'
// const authRef = ref(null)
const route = useRoute();
interface AuthParams {
  name: string,
  idCard: string,
  mobile: string,
  cardNo: string,
}
onMounted(() => {
  if(route.query.type) {
    authType.value = JSON.parse(route.query.type as string);
  if (authType.value) {
    getAuthDetail();
  }
  }
});
// 获取认证信息
const getAuthDetail = async () => {
  const res = await getAuthInfo();
  const { account, id_card, name, mobile } = res.data;
  formParams.value = {
    name,
    idCard: id_card,
    mobile,
    cardNo: account,
  };
  // 姓名脱敏
  formParams.value.name = name.replace(name.substr(1, name.length - 2), "*");
  // 身份证脱敏
  formParams.value.idCard = id_card.replace(
    id_card.substr(4, id_card.length - 9),
    "******"
  );
  // 手机号码脱敏
  formParams.value.mobile = mobile.replace(
    mobile.substr(3, mobile.length - 6),
    "****"
  );
  // 支付宝账号脱敏
  formParams.value.cardNo = account.replace(
    account.substr(3, account.length - 6),
    "****"
  );
};
const formParams = ref<AuthParams>({
  name: "",
  idCard: "",
  mobile: "",
  cardNo: "",
});
// 枚举 -1-认证失败 0-未认证 1-待审核 2-已认证
const authType = ref(false);
// 提交认证
const handleOk = async () => {
  // 判断formParam对象的每个value不为空
  if (Object.values(formParams.value).every((item) => item)) {
    // 身份证号正则表达式
    const idReg =
      /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X)$/;
    if (!idReg.test(formParams.value.idCard)) {
      showToast("请填写正确的身份证号码");
      return;
    }
    // 手机号正则
    const reg = /^1[3-9]\d{9}$/;
    if (!reg.test(formParams.value.mobile)) {
      showToast("请填写正确的手机号码");
      return;
    }
    // 提交认证
    await handleAuth(formParams.value)
    authType.value = true;
    showToast("认证成功");
  } else {
    showToast("请填写完整信息");
  }
};
// 解绑实名
const handleUnbinding = () => {
  showConfirmDialog({
    message: "是否确定解绑此实名信息？",
  })
    .then(async () => {
      // on confirm
      await unbinding();
      authType.value = false;
      formParams.value = {
        name: "",
        idCard: "",
        mobile: "",
        cardNo: "",
      };
      showToast("解绑成功");
    })
    .catch(() => {
      // on cancel
    });
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
